<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css 样式思路
			 1.通配选择器 微软雅黑 #f5f5f5 浅灰 外边距
			 2.#product_card 边框 内边距，外边距 阴影【透明度.1】文字居中
			 3.img 边框倒角 内外边距？【微调】
			 4.p 字体大小、颜色
			 5.h3 颜色 内外边距？ 【微调】 颜色
			 */
			#product_card{
				width: 400px;
				/* 边框 */
				border: 1px solid transparent; 
				/* 内边距 */
				padding: 30px;
				/* 外边距 */
				margin: 10px;
				/* 居中 */
				text-align: center;
				/* 阴影 */
				box-shadow: 1px 1px 10px 0px grey;
				/* 透明度 */
				box-shadow:  rgba(0,0,255,.1);
			}
			img{
				/* 边框倒角 */
				border-radius: 13px;
				/* 内边距 */
				padding: 10px;
			}
			p{
				/* 字体颜色 */
				color: red;
				font-size: 20px;
			}
			.o{
				color: #bababa;
				font-size: 15px;
			}
			h3{
				/* 字体颜色 */
				color: black;
				/* 内边距 */
				padding: 10px;
				/* 外边距 */
				margin: 10px;
			}
			#input{
				width: 150px;
				/* 字体大小 */
				font-size: 10px;
				/* 字体颜色 */
				color: #bab7b8;
				/* 背景 */
				background: #ffffff;
				/* 边框 */
				border: 1px solid #e0dfe4;
				/* 内边距 */
				padding: 10px;
				padding-right: 0px;
				/* 边框倒角 */
				border-radius: 3.5px;
				/* 边框阴影 */
				box-shadow: 1px 1px 3px #e0dfe4;
			}
			div>a{
			    color: #ffffff;
				/* 背景颜色 */
				background: red;
				/* 边框 */
				border: 1px solid #bab8b8;
				/* 边框颜色 */
				border-color: ;
				/* 外边距 */
				margin-left: 25px;
				/* 内边距 */
				padding: 4.1px;
				/* 边框倒角 */
				border-radius: 3.5px;	
			} 
		</style>
	</head>
	<body>
		<!-- 网页：1.html 结构【原生图分析】 -->
		<div id="product_card">
			<img src="img/小米SU7.jpg" width="300px" height="400px" alt="汽车">
			<h3>小米su7</h3>
			<p >￥279999.00</p>
			<p class="o">已有<span>10万+</span>评价</p>
		</div>
        <div id="input">搜索 京东商品<a>搜索</a></div>
        <a href="">1</a>
	   
		     
		
		
	</body>
</html>